<template>
  <div>
    <div id="huanbing" style="width: 381px;height:174px;">

    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts';


export default {
  mounted() {
    this.echatsmxl()
  },
  methods: {
    echatsmxl() {
      echarts.init(document.getElementById('huanbing')).setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          right: "3%",
          orient: "vertical",
          data: [
            '秩序',
            '工程',
            '客服',
            '保洁',
            '外委',
            '自有',
          ]
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            selectedMode: 'single',
            radius: [0, '30%'],
            label: {
              position: 'inner',
              fontSize: 12
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 2343, name: '自有' },
              { value: 3182, name: '外委' },
              // { value: 679, name: 'Marketing', selected: true }
            ]
          },
          {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '70%'],
            labelLine: {
              length: 5
            },
            label: {
              // formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}:}{c}  {per|{d}%}  ',
              backgroundColor: '#F6F8FC',
              borderColor: '#8C8D8E',
              borderWidth: 0,
              borderRadius: 6,
              rich: {
                a: {
                  color: '#6E7079',
                  lineHeight: 22,
                  align: 'center'
                },
                hr: {
                  borderColor: '#8C8D8E',
                  width: '100%',
                  borderWidth: 1,
                  height: 0
                },
                b: {
                  color: '#4C5058',
                  fontSize: 14,
                  fontWeight: 'bold',
                  lineHeight: 33
                },
                per: {
                  color: '#fff',
                  backgroundColor: '#4C5058',
                  padding: [3, 4],
                  borderRadius: 4
                }
              }
            },
            data: [
              { value: 573, name: '工程' },
              { value: 643, name: '客服' },
              { value: 1770, name: '秩序' },
              { value: 1861, name: '保洁' },
            ]
          }
        ]
      })
    }
  }
}
</script>
